<template>
  <div>
    <Divider orientation="left">修改密码</Divider>

    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
      <FormItem label="旧密码" prop="oldPassword">
        <Input v-model="formValidate.oldPassword" type="password" placeholder="Enter your old password" />
      </FormItem>
      <FormItem label="新密码" prop="password">
        <Input v-model="formValidate.password" type="password" placeholder="Enter your new password" />
      </FormItem>
      <FormItem label="新密码" prop="password2">
        <Input v-model="formValidate.password2" type="password" placeholder="Repeat your new password" />
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import { updatePassword } from '../api/user'
import { resetRouter } from '../router'

export default {
  name: 'password',
  data () {
    return {
      formValidate: {
        oldPassword: '',
        password: '',
        password2: ''
      },
      ruleValidate: {
        oldPassword: [
          { required: true, message: 'email cannot be empty', trigger: 'blur' },
          { type: 'string', min: 5, max: 32, message: '密码必须由5-32位字母或数字组成', trigger: 'blur' }
        ],
        password: [
          { required: true, message: 'The password cannot be empty', trigger: 'blur' },
          { type: 'string', min: 5, max: 32, message: '密码必须由5-32位字母或数字组成', trigger: 'blur' }
        ],
        password2: [
          { required: true, message: 'The password cannot be empty', trigger: 'blur' },
          { type: 'string', min: 5, max: 32, message: '密码必须由5-32位字母或数字组成', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (this.validatePassword()) {
                callback()
              } else {
                callback(new Error('两次密码输入不一致'))
              }
            }
          }
        ]
      }
    }
  },

  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          // console.log(this.formValidate)
          updatePassword(this.formValidate)
            .then(res => {
              this.$Notice.success({
                title: '修改成功',
                desc: '请刷新浏览器重新登录 5秒后自动刷新',
                duration: 5
              })
              localStorage.setItem('token', '')
              localStorage.setItem('userImg', '')
              localStorage.setItem('userName', '')
              // 重设路由
              resetRouter()
              this.$router.replace({ name: 'login' })
              setTimeout(() => {
                window.location.reload()
              }, 5000)
            })
            .catch(err => {
              if (err.response) {
                this.$Notice.error({
                  title: '修改失败!',
                  desc: err.response.data.message,
                  duration: 5
                })
              }
            })
        }
      })
    },
    validatePassword () {
      return this.formValidate.password === this.formValidate.password2
    }
  }
}
</script>

<style scoped>

</style>
